<template>
  <div>
    <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search" />
    <el-table v-loading="listLoading" :data="list" :default-sort="{prop: 'date', order: 'descending'}" element-loading-text="给我一点时间" border fit highlight-current-row>
      <el-table-column align="center" prop="goodsId" label="商品id"></el-table-column>
      <el-table-column align="center" prop="serialNo" label="商品款号"></el-table-column>
      <el-table-column align="center" prop="name" label="商品名称"></el-table-column>
      <el-table-column align="center" prop="backCatName" label="后台分类"></el-table-column>
      <el-table-column align="center" label="状态">
        <span slot-scope="scope">
          {{scope.row.upShelf === 0?'已下架' :'已上架'}}
        </span>
      </el-table-column>
      <el-table-column align="center" prop="upShelfTime" label="上架时间" sortable>
        <template slot-scope="scope">
          {{scope.row.upShelfTime  | formatDateTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="$router.push({path:'/goodsMiddleStage/goodsManageEdit', query:{goodsId: scope.row.goodsId, backCatId: scope.row.backCatId}})">
            {{scope.row.upShelf === 1?'查看' :'编辑'}}
          </el-button>
          <el-button :type="!scope.row.upShelf? 'success' : 'danger'" @click="_updateUpShelfStatus(scope.row)" plain>
            {{scope.row.upShelf === 1?'下架' :'上架'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex"
      :page-sizes="[10, 20, 50, 100, 200]" :page-size="listQuery.pageSize" background layout="total, sizes, prev, pager, next, jumper"
      :total="listTotal">
    </el-pagination>
  </div>
</template>

<script>
/**
 * 商品库
 */
import mixins from '../../mixins'
import SearchForm from '@/components/searchForm'
import {
  getFrontCatTree,
  getGoodsList,
  getCateTree,
  updateUpSelfStatus
} from '@/api/goodMiddleStage'
export default {
  name: 'goodsMiddleGoods',
  mixins: [mixins],
  components: {
    SearchForm
  },
  data() {
    return {
      listQuery: {
        backCatId: '',
        frontCatId: '',
        businessModel: '',
        name: '',
        pageIndex: 1,
        pageSize: 20,
        queryType: 3,
        serialNo: '',
        upShelf: ''
      },
      queryConfig: [
        { prop: 'name', type: 'input', label: '商品名称' },
        { prop: 'serialNo', type: 'input', label: '商品款号' },
        {
          prop: 'frontCatIds',
          type: 'cascader',
          label: '前台分类',
          showAll: false, // 级联选择 是否展示全部
          settings: { value: 'id', label: 'name' },
          data: []
        },
        {
          prop: 'backCatIds',
          type: 'cascader',
          label: '后台分类',
          showAll: false, // 级联选择 是否展示全部
          settings: { value: 'catId', label: 'name' },
          data: []
        },
        {
          prop: 'businessModel',
          type: 'select',
          label: '经营模式',
          data: [
            {
              label: '自营',
              value: 1
            },
            {
              label: '招商',
              value: 2
            }
          ]
        },
        {
          prop: 'upShelf',
          type: 'select',
          label: '状态',
          data: [
            { label: '已上架', value: 1 },
            { label: '已下架', value: 0 }
          ]
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getFrontTree()
      this.getBackCateTree()
      this.getList()
    },
    async getList() {
      try {
        const { data } = await getGoodsList(this.listQuery)
        this.list = data.data
        this.listTotal = data.total
      } catch (error) {
        console.log(error)
      }
    },
    _updateUpShelfStatus(val) {
      let msg = ''
      if (val.upShelf) {
        msg = '是否立即下架商品?'
      } else {
        msg = '是否立即上架商品?'
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const { data, message } = await updateUpSelfStatus({
              goodsId: val.goodsId,
              upShelf: Number(!val.upShelf)
            })
            if (message === 'SUCCESS') {
              this.$message.success('操作成功')
            } else {
              this.$message.error(message)
            }
            this.getList()
          } catch (error) {
            this.$message.error('操作失败')
            console.log(error)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 前台类树
    async getFrontTree() {
      try {
        const { data } = await getFrontCatTree()
        this.queryConfig[2].data = data.treeList
        this.generateCatTree(this.queryConfig[2].data)
      } catch (error) {
        console.log(error)
      }
    },
    // 后台类树
    async getBackCateTree() {
      try {
        const { data } = await getCateTree()
        this.queryConfig[3].data = data.treeList
        this.generateCatTree(this.queryConfig[3].data)
      } catch (error) {
        console.log(error)
      }
    },
    // 生成类目数 删除children为空的选项
    generateCatTree(val) {
      val.forEach(it => {
        if (it.children.length > 0) {
          this.generateCatTree(it.children)
        } else {
          delete it.children
        }
      })
    },
    search() {
      this.listQuery.pageIndex = 1
      if (this.listQuery.backCatIds) {
        this.listQuery.backCatId = this.listQuery.backCatIds.slice(-1)[0]
      } else {
        this.listQuery.backCatId = ''
      }
      if (this.listQuery.frontCatIds) {
        this.listQuery.frontCatId = this.listQuery.frontCatIds.slice(-1)[0]
      } else {
        this.listQuery.frontCatId = ''
      }
      this.getList()
    }
  }
}
</script>

<style>
</style>
